<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1{
                width: 100px;
                height: 150px;
                background: red;
                position: absolute;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body style="height: 2000px;">
        <div id="div1"></div>
    </body>
    <script>
        window.onscroll=function () {
            var oDiv1 = document.getElementById("div1");
            var scroolTop = document.documentElement.scrollTop || document.body.scrollTop;
            // oDiv1.style.top=document.documentElement.clientHeight-oDiv1.offsetHeight+scroolTop+"px";
            startMove(document.documentElement.clientHeight-oDiv1.offsetHeight+scroolTop);
        };
        var timer = null;
        function startMove(iTarget) {
            var oDiv1 = document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function () {
                var speed = (iTarget-oDiv1.offsetTop)/6;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (iTarget === oDiv1.offsetHeight){
                    clearInterval(timer);
                }else{
                    oDiv1.style.top = oDiv1.offsetTop+speed+"px";
                }
            },30);

        }
    </script>
</html>